<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // 查MDN文档，学习新方法的步骤

      // 1. 语法： 先大致了解
      // 2. 作用： 看这个方法是干嘛的
      // 3. 参数： 熟悉一下参数
      // 4. 返回值： 看是否有返回值

      // 5. 描述： 注意事项 大致过一下
      // 6. 示例代码，测试一下

      // 语法: arr.find(callbackFn)
      // 作用: 返回数组中满足条件的第一个的元素， 否则返回 undefined
      // 参数:
      //    cbFn 函数   ==> 注意，这个回调函数，一般需要写上return
      //    cbFn的参数
      //             第一个参数   ： item  当前元素
      //             第二个参数   ： index  索引  （可选）
      // 返回值： 数组中第一个满足条件的元素   / undefined

      // 注意： 返回的是第一个元素
      const arr = ["orange", "blue", "red"];
      const res = arr.find(function (item) {
        return item === "blue";
      });
      console.log(res);
      const res2 = arr.find((el) => el === "blue");

      // 实际应用 可以搜索查找
      // 需求： 找到数组中名字为小米的那个元素？
      const arrTemp = [
        { name: "小米", price: 1999 },
        { name: "华为", price: 3999 },
        { name: "Apple", price: 8999 },
      ];
      const mi = arrTemp.find((item) => item.name === "小米");
      const mi2 = arrTemp.find(({ name }) => name === "小米");
      console.log(mi);
      console.log(mi2);
    </script>
  </body>
</html>
